import React from 'react'
import PropTypes from 'prop-types'
import { Row, Col, Card, Button ,Table} from 'antd'
import { routerRedux } from 'dva/router'
import Container from './Container'
import styles from './Container.less'
import { connect } from 'dva'
import {
  BarChart,
  Bar,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  Legend,
} from 'recharts'



const EditorPage = ({ location, dispatch, testResult, loading }) =>{
  const { list, pagination, currentItem, modalVisible, selectedRowKeys } = testResult


  const colProps = {
    lg: 24,
    md: 24,
  }

  const SimpleBarChart = () => (
    <Container>
      <BarChart data={list.topData} margin={{
        top: 5,
        right: 30,
        left: 20,
        bottom: 5,
      }}>
        <XAxis dataKey="testresult_ID" />
        <YAxis />
        <CartesianGrid strokeDasharray="3 3" />
        <Tooltip />
        <Legend />
        <Bar dataKey="passnum" fill="#228B22" />
        <Bar dataKey="failnum" fill="#FF6347" />
        <Bar dataKey="errornum" fill="#FFD700" />
      </BarChart>
    </Container>
  )



  const columns = [
   {
    title: '测试结果ID',
    dataIndex: 'testresult_ID',
    key: 'testresult_ID',
  }, {
    title: '产品名称',
    dataIndex: 'product_name',
    key: 'product_name',
  }, {
      title: '版本号',
      dataIndex: 'release',
      key: 'release',
  }, {
    title: '测试计划名称',
    dataIndex: 'plan_name',
    key: 'plan_name',
  }, {
    title: '机器IP',
    dataIndex: 'ip',
    key: 'ip',
    render: (text,record) => {
      return <span>服务机IP：{record.sut_ip}<br/>测试机IP：{record.testhost_ip}</span>
    },
  }, {
    title: '浏览器',
    dataIndex: 'browser',
    key: 'browser',
  }, {
    title: '套件名称',
    dataIndex: 'suite_name',
    key: 'suite_name',
  }, {
      title: '套件测试时间',
      dataIndex: 'time',
      key: 'time',
      render: (text,record) => {
        return <span>开始时间：{record.starttime}<br/>结束时间：{record.endtime}<br/>执行时间：{record.executetime}</span>
      },
  },{
    title: '套件测试结果',
    dataIndex: 'result',
    key: 'result',
      render: (text,record) => {
        return <span><b>成功：{record.passnum}</b><br/><b className={record.failnum>0?styles.red:''}>失败：{record.failnum}</b><br/><b className={record.errornum>0?styles.red:''}>错误：{record.errornum}</b></span>
      },
  },{
      title: '套件测试报告',
      dataIndex: 'report',
      key: 'report',
      render: (text,record) => {
        return <a href={record.report_path} target="_blank">查看报告</a>
      },
    }];
  const getBodyWrapperProps = {
    page: location.query.page,
    current: pagination.current,
  }
  const onChange= (page)=> {
    const { query, pathname } = location
    dispatch(routerRedux.push({
      pathname,
      query: {
        ...query,
        page: page.current,
        pageSize: 10,
      },
    }))
  }
  return (
    <div className="content-inner">

      <Row gutter={32}>
        <Col {...colProps}>
          <h2 className={styles.titleCenter}>最近10次结果</h2>
          {/*<Card title="SimpleBarChart">*/}
          <SimpleBarChart />
          {/*</Card>*/}
        </Col>

        <hr/>
        <Col span={24}>
          <h2 className={styles.titleCenter}>所有结果</h2>
          <Table dataSource={list.allData} onChange={onChange} columns={columns} pagination={pagination}/>
        </Col>

      </Row>

    </div>
  )

}
EditorPage.propTypes = {
  testResult: PropTypes.object,
  location: PropTypes.object,
  dispatch: PropTypes.func,
  loading: PropTypes.object,
}

export default connect(({ testResult, loading }) => ({ testResult, loading }))(EditorPage)
